<template>
  <div id="app" ref="prev">
    <x-loading />
    <transition>
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      screenWidth: 0
    }
  },
  
  created() {
  },
  mounted() {
    let authorityTree = localStorage.getItem('authorityTree')
    if (authorityTree) {
      this.addRouterTree()
      if (authorityTree.includes('/index')) {
        this.$store.commit('pageTabState/setFirstTab', {
          title: '主页',
          path: '/'
        })
      } else {
        this.$store.commit('pageTabState/setFirstTab', {
          title: '欢迎页',
          path: '/welcome'
        })
      }
    }

    // 监听屏幕大小的变化
    this.screenWidth = this.$refs.prev.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = this.$refs.prev.clientWidth
      })()
    }
  },
  watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < 1400) {
          localStorage.setItem('screen', 'small')
        } else {
          localStorage.setItem('screen', 'big')
        }
      },

      immediate: true
    }
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
#app {
  width: 100vw;
  height: 100vh;
  min-width: 1024px;
  min-height: 500px;
}
.el-message {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
}
</style>
